<template xmlns:el="http://www.w3.org/1999/html">
  <el-row align="middle">
    <el-col :span="3" align="left" style="line-height:60px;">
      <el-button class="left-button" icon="caret-left"/>
      <!--刷新按钮-->
      <el-button class="left-button" icon="refresh" @click="reload"/>
<!--      <el-icon><caret-left /></el-icon> -->
<!--      <el-icon><Refresh /></el-icon>-->
    </el-col>
    <el-col :span="13" align="left">
      <!--面包屑导航-->
      <MyBreadcrumb></MyBreadcrumb>
      <!--导航条-->
<!--      <el-menu
        router
        mode="horizontal"
      >
        <el-menu-item index="1" route="/backstage">首页</el-menu-item>
        <el-sub-menu index="2">
          <template #title>我的工作台</template>
          <el-menu-item index="2-1" route="/admin/admin/PasswordEdit">密码修改</el-menu-item>
          <el-menu-item index="2-2">选项2</el-menu-item>
          <el-menu-item index="2-3">选项3</el-menu-item>
          <el-sub-menu  index="2-4">
            <template #title>选项4</template>
            <el-menu-item index="2-4-1">选项1</el-menu-item>
            <el-menu-item index="2-4-2">选项2</el-menu-item>
            <el-menu-item index="2-4-3">选项3</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
        <el-menu-item><a :href="proxy.$urls.server1+'/doc.html'" target="_blank">服务端接口文档</a></el-menu-item>
      </el-menu>-->
    </el-col>
    <el-col :span="8">
      <el-badge :value="12" class="item" style="margin-right: 30px;display: inline-block;margin-top: 10px;cursor: pointer">
        <el-icon><Bell /></el-icon>
      </el-badge>
      <el-dropdown @command="handleCommand">
        <div class="head-con">
          <el-image
            style="height:28px;margin-right: 10px;border-radius:50%;"
            class="head-image"
            v-if="headImgUrl!=null&&headImgUrl!=''&&headImgUrl.length>10"
            fit="contain"
            :src="headImgUrl"
            :preview-teleported="true">
            <template #error>
              <el-icon>
                <Picture/>
              </el-icon>
            </template>
          </el-image>
          <el-image
            v-else
            style="height:28px;margin-right: 10px"
            fit="contain"
            :src="noPicSrc"></el-image>
          <span class="head-nickname">
<!--            {{ store.getters.getLoginUser?store.getters.getLoginUser.nickName:'' }}-->
            {{ nickName }}
          <el-icon class="el-icon--right">
            <arrow-down/>
          </el-icon>
          </span>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="user">
              <el-icon><User /></el-icon>
              个人中心</el-dropdown-item>
            <el-dropdown-item>
              <el-icon><Message /></el-icon>
              基本信息编辑</el-dropdown-item>
            <el-dropdown-item command="updatePassword">
              <el-icon><Key /></el-icon>
              密码修改</el-dropdown-item>
            <el-dropdown-item command="logout" divided>
              <el-icon><SwitchButton /></el-icon>
              退出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-col>
  </el-row>
  <!--修改密码对话框-->
  <UserPasswordEditDialog
    ref="passwordEditDialogRef"/>
</template>

<script lang="ts" setup>
import { noPicSrc } from '@/api/pic';
import MyBreadcrumb from '@/components/MyBreadcrumb.vue';
import UserPasswordEditDialog from '@/views/index/UserPasswordEditDialog.vue';
import {
  getCurrentInstance, onMounted, inject, ref,
} from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';

// 刷新当前路由
// 获取父组件的路由对象
const reload = inject('reload');

// 导入路由
const router = useRouter();// 创建路由对象
const { proxy } = getCurrentInstance();
const store = useStore();
// 修改密码对话框的ref对象
const passwordEditDialogRef = ref();
// 点击菜单事件
const handleCommand = (command: string | number) => {
  if (command === 'logout') { // 如果是注销
    new proxy.$Request(proxy.$urls.API_URL_BACKSTAGE_ADMIN_LOGOUT).get();
    // 清除登录信息
    store.dispatch('logout');
    router.push('/login');
  } else if (command === 'user') { // 如果是用户
    router.push('/backstage/user');
  } else if (command === 'updatePassword') { // 如果要修改密码
    passwordEditDialogRef.value!.openDialog();
  }
};

// 定义接收用户头像变量
const headImgUrl = ref<string>();
const nickName = ref<string>();

onMounted(async () => {
  // 获取当前登录账户信息，并存储到vuex
  await store.dispatch('getAdmin');
  nickName.value = store.getters.getLoginUser.nickName;
  headImgUrl.value = store.getters.getLoginUser.headImgUrl;
});
</script>

<style lang="scss" scoped>
.el-menu--horizontal{/*右侧界面的头部导航条，高度默认是60*/
  border-bottom:none; /*菜单默认有底部边框，但因为本页面在el-header已经设置了底部边框，为了不重复到样底部边框加粗，故取消*/
}
.el-icon:not(:first-child){ /*除了第一张图片，其他都有左边距。后面修改为按钮，此样式保留，不生效*/
  margin-left: 10px;
}
.left-button{
  margin-top:-5px;
  height:60px;
  border:none;
  margin-left:0px;/*去掉按钮的默认12px的左边距*/
}
.left-button:hover{ /*按钮经过时的样式*/
  background: #f4f4f5;
}

.head-con{
  display: flex;
  cursor: pointer;
  background-color: #fff;
  margin-top: 1px;
}
.head-con:hover{
  background-color: rgba(255, 255, 255, 0.44);
}
.head-nickname{
  margin-top: 4%;
}
</style>
